<template>
  <div class="app-login">
    <header class="app-login__header">
      <div class="app-login__header__top">
        <div class="app-login__header__top__left">
          &lrm;中文(简体)&lrm;
          <div class="icon">
            <van-icon name="arrow-down" />
          </div>
        </div>
        <div class="app-login__header__top__right">
          <van-icon name="shield-o" />
          &lrm;帮助&lrm;
        </div>
      </div>
      <h6 class="app-login__header__bottom">
        小米账号登录
      </h6>
      <div class="app-login__header__logo">
        <img src="@/assets/logo.png" alt="">
        <span>
          让每个人都能享受科技的乐趣
        </span>
      </div>
    </header>
    <div class="app-login__content">
      <input v-model="loginname" class="app-login__content__tel" type="text" placeholder="邮箱/手机号码/小米ID">
      <input v-model="password" class="app-login__content__password" type="password" placeholder="请输入密码">
      <button class="app-login__content__login" @click="login" :disabled="disabled">登录</button>
    </div>
    <div class="app-login__registry">
      <span @click="$router.push({ name: 'registry' })">没有账号? 立即注册!</span>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import { postLoginApi } from '@/api/haigou'
import { Toast, Dialog } from 'vant'

Vue.use(Toast)
Vue.use(Dialog)
export default {
  name: 'AppLogin',
  data () {
    return {
      loginname: '',
      password: '',
      disablelogin: false
    }
  },
  computed: {
    disabled () {
      return !(this.loginname && this.password)
    }
  },
  methods: {
    ...mapActions('user', ['updateUserIdAndToken']),
    async login () {
      try {
        const data = await postLoginApi(this.loginname, this.password)
        console.log(data)
        this.updateUserIdAndToken(data)
        Dialog.confirm({
          message: '登录成功',
          cancelButtonText: '回到首页',
          confirmButtonText: '返回'
        }).then(() => { // 确定
          this.$router.go(-1)
        }).catch(() => {
          this.$router.replace({ name: 'home' })
        })
        Toast('登陆成功')
      } catch (error) {
        if (error.message === '10010') {
          Toast('该用户不存在')
        }
        if (error.message === '10011') {
          Toast('您输入的密码不正确')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-login {
  background-image: url('@/assets/loginbg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 50px;
  &__header {
      &__top {
        height: .5rem;
        display: flex;
        padding: 0.16rem .35rem;
        font-size: 0.13rem;
        background: #fff;
        align-items: center;
        line-height: 0.44rem;
        color: gray;
        justify-content: space-between;
        &__left {
          display: flex;
          .icon {
            padding-left: 0.025rem;
            color: gray;
          }
        }
      }
      &__bottom {
        font-size: .2rem;
        text-align: center;
        color: rgb(50, 50, 50);
        font-weight: 700;
        padding: 10px 0;
      }
      &__logo {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: .15rem;
        img {
          width: .7rem;
          height: .7rem;
        }
        span {
          margin-top: 0.08rem;
          font-size: .135rem;
        }
      }
  }
  &__content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    padding: 0.16rem .35rem;
    &__tel {
      width: 100%;
      height: 50px;
      margin: 10px 0;
      border: none;
      background: rgb(240, 240, 240);
      border-radius: 15px;
      padding: 0 20px;
      margin-top: 0;
    }
    &__password {
      width: 100%;
      height: 50px;
      border: none;
      background: rgb(240, 240, 240);
      border-radius: 15px;
      padding: 0 20px;
      margin-top: 0;
    }
    &__login {
      width: 100%;
      height: 50px;
      border-radius: .4rem;
      border: none;
      background: rgb(84, 167, 250);
      font-size: 18px;
      color: white;
      margin-top: 30px;
    }
    button:disabled {
      background: rgb(181, 218, 255);
    }
  }
  &__registry {
    padding: 0 .35rem;
    text-align: center;
    color: gray;
  }
}
</style>
